@extends('Layouts.iframe')
@section('content')
    <style>
        .clearfix:after {
            visibility: hidden;
            display: block;
            font-size: 0;
            content: " ";
            clear: both;
            height: 0;
        }
        .dictionaries_ input{
            height: 26px;
            border: 1px solid #ddd;
            padding-left: 10px;
            width: 100%;
            box-sizing: border-box;vertical-align: middle;position: relative;top: 0;z-index: 5;
        }
        .parent_text{
            position: relative;width: 200px;float: left;height: 26px;
        }
        .rela{
            position: relative;
        }
        .add_{
            float: left;cursor: pointer;display: inline-block;
            width: 26px;
            height: 26px;
            line-height: 26px;
            text-align: center;
            font-size: 25px;
            margin-left: 10px;
            background-color: #ccc;
            border-radius: 4px;
        }
        .close_{
            position: absolute;top: -1px;z-index: 8;cursor: pointer;right: 2px;font-size: 20px;width: 26px;height: 26px;line-height: 26px;text-align: center;
        }
        .children_box{
            padding-left: 30px;
            width: 170px;
        }
        .string_{
            display: inline-block;
            width: 16px;
            height: 35px;
            border-left: 1px solid #ddd;
            border-bottom: 1px solid #ddd;
            position: absolute;
            top: -22px;
            left: -17px;
            z-index: 2;
        }
        label.error{
            z-index: 6;
            margin-right: 3%;
        }
    </style>

    <article class="page-container">
    <form action="" method="post" class="form form-horizontal" id="form-dictionary-add">
        <input type="hidden" name="_token" value="{{csrf_token()}}">
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>配置项：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" value="{{old('name')}}" maxlength="10" placeholder="" id="name" name="name">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3">描述：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <textarea name="intro" cols="" rows="" class="textarea"  placeholder="说点什么...50字以内" maxlength="50">{{old('intro')}}</textarea>
                <p class="textarea-numberbar"></p>
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3">
                {{--<span class="c-red">*</span>--}}
                值：
            </label>
            <div class="formControls col-xs-6 col-sm-6">
                <ul class="dictionaries_">
                    <li>
                        <div class="parent_box ">
                            <div class="clearfix">
                                <p class="parent_text formControls">
                                    <input type="text" maxlength="10" name="child[0][name]" data-index="0">
                                    <span class="close_" onclick="removeBlock(this)">×</span>
                                </p>
                                <span class="add_" onclick="addInline(this)">+</span>
                            </div>
                            <div class="children_box">
                                <div class="rela">
                                    <span class="string_"></span>
                                    <p class="rela formControls">
                                        <input type="text" maxlength="10" name="child[0][child][0]" >
                                        <span class="close_" onclick="removeInline(this)">×</span>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
                <span class="add_" onclick="addBlock()">+</span>
            </div> 
        </div>
        {{--@can('dictionary.store')--}}
        <div class="row cl">
            <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
                <input class="btn btn-primary radius" type="submit" id="submit" value="&nbsp;&nbsp;提交&nbsp;&nbsp;">
            </div>
        </div>
        {{--@endcan--}}
    </form>
</article>
@endsection
@section('js')
<script>
    function addBlock() {
        var index=$('.dictionaries_').find('li').length;
        var str = '<li>'
                + '<div class="parent_box ">'
                + '<div class="clearfix">'
                + '<p class="parent_text formControls">'
                + '<input type="text" maxlength="10" name="child['+index+'][name]" data-index="'+index+'" >'
                + '<span class="close_" onclick="removeBlock(this)">×</span>'
                + '</p>'
                + '<span class="add_" onclick="addInline(this)">+</span>'
                + '</div>'
                + '<div class="children_box">'
                + '</div>'
                + '</div>'
                + '</li>'
        $('.dictionaries_').append(str)
    }
    function addInline(type){
        var index=$(type).closest('.clearfix').find('input').data('index');
        var index_child=$(type).closest('.parent_box').find('.children_box').find('input').length;
        var str = '<div class="rela formControls">'
                + '<span class="string_"></span>'
                + '<p class="rela">'
                + '<input type="text" maxlength="10" name="child['+index+'][child]['+index_child+']" >'
                + '<span class="close_" onclick="removeInline(this)">×</span>'
                + '</p>'
                + '</div>'
        $(type).parent().next().append(str)
    }
    function removeBlock(type){
        $(type).parents('li').remove()
    }
    function removeInline(type){
        $(type).parent().parent().remove()
    }
    $("#form-dictionary-add").validate({
        rules:{
            name:{
                required:true,
                maxlength:10
            }
        },
        onkeyup:false,
        focusCleanup:true,
        success:"valid",
        submitHandler:function(form){
            var flag=0;
            $('.dictionaries_ input').each(function () {
                if($(this).val()===''){
                    flag++;
                    $(this).addClass('error');
                    $(this).after('<label id="name-error" class="error" for="name" style="display: block;">请填写值</label>');
                }
            });
            if(flag!==0){
                return false;
            }
            $.post("{{route('dictionary.store')}}", $('form').serializeArray(), function (res) {
                layer.msg(res.msg,{icon:1,time:1000});
                if (res.status === 200) {
                    var index = parent.layer.getFrameIndex(window.name);
                    setTimeout(function () {
                        window.parent.location.reload();
//                        parent.location.reload();
//                        parent.$('.btn-refresh').click();
//                        parent.layer.close(index);
                    },1000);
                }
            }).fail(function (data) {
                var errors=$(JSON.parse(data.responseText))[0].errors;
                $.each(errors, function (key, value) {
                    console.log(value);
                    layer.msg(value[0],{icon:1,time:1000});
                });
            });


        }
    });
</script>
@endsection
